<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./assets/lib/bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="./assets/lib/layui/css/layui.css">
  <link rel="stylesheet" href="./assets/css/score.css">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid header">
      <h1>学员成绩</h1>
      <p>点击表格修改或录入</p>
    </div>
  </nav>


  <!-- table-striped隔行换色 -->
  <table class="table table-striped">
    <colgroup>
      <col width="14%">
      <col width="16%">
      <col width="14%">
      <col width="14%">
      <col width="14%">
      <col width="14%">
      <col width="14%">
    </colgroup>
    <thead>
      <tr>
        <th scope="col">学员ID</th>
        <th scope="col">姓名</th>
        <th scope="col">第1次成绩</th>
        <th scope="col">第2次成绩</th>
        <th scope="col">第3次成绩</th>
        <th scope="col">第4次成绩</th>
        <th scope="col">第5次成绩</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <th scope="row">10</th>
        <td>张三</td>
        <td class="score">70</td>
        <td class="score">70</td>
        <td class="score">70</td>
        <td class="score">70</td>
        <td class="score">70</td>
      </tr> -->

    </tbody>
  </table>

  <script src="./assets/lib/jquery-3.6.0.min.js"></script>
  <script src="./assets/lib/bootstrap/bootstrap.min.js"></script>
  <script src="./assets/lib/layui/layui.js"></script>
  <script src="./assets/lib/axios.js"></script>
  <script src="./assets/utils/request.js"></script>
  <script>
    // -------------- 获取分数，展示列表 ------------
    function getlist() {
      axios.get('/score/list').then(({
        data: res
      }) => {
        // console.log(res);
        let {
          code,
          data
        } = res;
        if (code === 0) {
          let arr = [];

          for (let key in data) {
            arr.push(`
          <tr>
              <th scope="row">${key}</th>
              <td>${data[key].name}</td>
              <td data-batch="1" data-id="${key}" class="score">${data[key].score[0]}</td>
              <td data-batch="2" data-id="${key}" class="score">${data[key].score[1]}</td>
              <td data-batch="3" data-id="${key}" class="score">${data[key].score[2]}</td>
              <td data-batch="4" data-id="${key}" class="score">${data[key].score[3]}</td>
              <td data-batch="5" data-id="${key}" class="score">${data[key].score[4]}</td>
          </tr>
          `);
          }

          $('tbody').html(arr.join(''))
        }
      })
    }
    getlist();


    // 可编辑的表格
    $('tbody').on('click', '.score', function() {
      let td = $(this);
      let text = td.text();


      layer.open({
        title: "修改成绩",
        content: `<input type="text" id="updscore" value=${text}>`,
        yes: function(index) {

          let score = $("#updscore").val();
          if (isNaN(score) || score < 0 || score > 100) {
            return layer.msg('请输入0~100之间的数字');
          }
          let stu_id = td.data('id');
          let batch = td.data('batch');

          axios
            .post('/score/entry', {
              score,
              stu_id,
              batch
            })
            .then(({
              data: res
            }) => {
              if (res.code === 0) {
                layer.msg(res.message);
                td.html(score)
                layer.close(index);
              }
            })
        }
      });


    })
  </script>
</body>

</html>